Hotwire Native is a web-first framework designed for creating native mobile applications. It aims to simplify the development process, which is often cumbersome and resource-intensive when building fully native apps. Traditional app development typically requires large teams of specialized developers, slow development cycles, and the need to re-implement features across different platforms. Additionally, every update must navigate the app store review process, which can be time-consuming. In contrast, Hotwire Native allows developers to create screens using HTML and CSS, which can then be reused across various platforms. This approach not only streamlines the development process but also enables developers to leverage existing Hotwire web applications. By using this framework, developers can implement bug fixes and introduce new features without the delays associated with app store approvals. Furthermore, it provides immediate access to the latest iOS and Android SDKs and APIs. The framework is designed for small teams, empowering them to build functional, aesthetically pleasing, and sustainable mobile applications without the complexities of traditional native development. Hotwire Native is a high-level framework available for both iOS and Android, offering all the necessary tools to utilize web applications in mobile app development. It operates by wrapping a web view within a native shell, rendering HTML directly from the server, and automatically managing native navigation and transition animations between screens. For scenarios where web capabilities fall short, developers have the option to enhance their applications with Bridge Components or fully native screens. The framework provides comprehensive resources for getting started with both iOS and Android applications, making it accessible for developers looking to streamline their mobile app development process. Hotwire Native is currently available in version 1.0.0 for both iOS and Android, released on September 25, 2024. The project is supported by the creators of other well-known development tools, and users can subscribe to receive updates about the project via email.

Reweb is a visual website builder specifically designed for developers, leveraging the capabilities of Next.js and Tailwind CSS. It aims to streamline the web development process, allowing users to build websites quickly and efficiently without the need for extensive coding knowledge. The platform emphasizes a no-code approach, enabling developers to export applications that utilize Next.js, Tailwind, and Shadcn UI, while also offering extensive customization options. The visual editing feature of Reweb is tailored for developers, providing an interface that feels familiar and intuitive, akin to editing code but in a visual format. This allows users to make changes in real-time, enhancing the overall development experience. The platform also includes tools for task and issue management, which helps teams optimize their workflows and unlock their full potential. Reweb offers a variety of features to facilitate rapid development. Users can edit Tailwind and Shadcn UI components visually, export high-quality Next.js code, and utilize pre-made templates to jumpstart their projects. Additionally, the platform includes AI-generated themes, allowing users to create appealing color palettes and designs based on simple prompts. The reception of Reweb has been overwhelmingly positive, with many developers praising its ease of use compared to other tools like Webflow and Framer. Users have expressed their appreciation for the platform's ability to simplify the process of building landing pages and other web projects, highlighting its natural workflow and the quality of the generated code. For those with questions or seeking further information, Reweb provides support through Discord and offers a comprehensive FAQ section addressing common inquiries about its features, learning curve, and code quality. Overall, Reweb positions itself as a powerful tool for developers looking to build websites efficiently while maintaining the flexibility to customize their projects extensively.

Incident.io chose React Native for its on-call mobile app because it could provide a native feel, a single codebase for iOS and Android, and code familiarity for its team. The team initially used Expo Go for rapid development and iteration during a hackathon, then transitioned to the "managed workflow" setup for production, using Expo's build services and implementing native features through Expo's "modules" system.

htmx offers a simpler alternative to frameworks in frontend development by enhancing HTML with attributes that enable AJAX-like functionality, utilizing the hypermedia concept to create RESTful applications without excessive JavaScript.

A WebAssembly-based stack for cross-platform apps.

You can drop Web Awesome components anywhere on the web and they'll work - no JavaScript framework is necessary.

WebContainers allows developers to build instant, interactive coding experiences on the browser. Its team recently released a way to execute, interpret, and refactor AI-generated code directly in the browser. WebContainers provides a secure, sandboxed environment with zero latency, zero compute costs, and zero virtual machines.

NodeSwift is a bridge between Node.js and Swift code. It makes it possible to write Swift code that talks to Node.js libraries, and vice versa. This means developers can use native macOS APIs from an Electron app, npm APIs from a Swift app, and more.

Tailwind CSS has some lesser-known features that can make developing web UIs easier. This article goes over a couple of them, such as using gap-* to add space between elements, accent-* utilities to change the color of checkboxes/radio buttons, and peer-* modifiers to style elements based on the state of sibling elements.

Sahil Lavingia, the CEO of Gumroad, shared insights on the decision-making process regarding the technology stack for a new project called Helper. Initially, there was optimism about using htmx, a framework designed to simplify interactions in web applications. Lavingia's enthusiasm was influenced by past experiences with React, which he felt was often too complex for their needs. He believed htmx could provide a lightweight alternative for adding simple interactions. However, as the project progressed, the team encountered several challenges that led them to abandon htmx in favor of React and Next.js. One of the primary issues was the developer experience; while htmx could technically accomplish their goals, the process felt forced and less intuitive compared to the natural flow they experienced with Next.js. This was particularly evident when building complex forms that required dynamic validation and conditional fields, where htmx necessitated convoluted server-side logic. User experience also suffered with htmx, as it tended to push the application towards a Rails/CRUD approach, resulting in a generic and uninspiring interface. The team faced significant hurdles when trying to implement features like drag-and-drop functionality, which was much smoother and more efficient with React libraries. Another factor was the support from AI tools, which were more familiar with Next.js than htmx. This discrepancy affected their development speed and problem-solving capabilities, as resources for React/Next.js were more abundant and accessible. As the project grew in complexity, htmx's limitations became more pronounced. The simplicity that initially attracted the team began to feel restrictive, especially when they needed to implement sophisticated interactions and manage state across multiple components. The vast ecosystem surrounding React and Next.js provided solutions to many challenges, whereas htmx often required the team to create custom solutions or compromise on functionality. Ultimately, the transition to React and Next.js allowed Gumroad to enhance the user experience significantly. Features like drag-and-drop functionality, complex state management, dynamic form generation, and real-time collaboration were easier to implement and optimize within the React ecosystem. The team found that React's tools and libraries facilitated a more engaging and responsive application. Lavingia concluded that while htmx has its merits, particularly for simpler projects or those built on existing server-rendered applications, the specific needs of the Helper project made React and Next.js the better choice. He acknowledged the importance of selecting technologies that can grow with a project and support long-term goals. The experience reinforced the idea that understanding a project's unique requirements is crucial in choosing the right tools, and he remains open to reevaluating their tech stack as needs evolve and new technologies emerge.

Wix is launching a new generative AI feature integrated into its app builder tool that enables users to create iOS and Android apps by simply describing their ideas in plain English. It promises to simplify app creation. Concerns over AI-generated code quality and security challenges linger, though Wix remains committed to constant product improvement.

Web development started with simple HTML and CSS. Eventually, client-side JavaScript allowed for more dynamic websites. The need for SEO and performance led to the creation of server-side rendering and frameworks like Next.js. JavaScript's shortcomings led to TypeScript and Svelte. At the end of the day, the core goal of all these evolutions was to create enjoyable user experiences, so the tools being used don't matter much.

Heatbot.io is an innovative platform designed to transform user interaction data into actionable website improvements through a generative UI builder. By allowing users to upload heatmaps—visual representations of user engagement on their websites—Heatbot leverages artificial intelligence to generate optimized code for enhanced user interfaces in a matter of seconds. The process begins with users uploading a screenshot of the website or specific UI elements they wish to improve. Following this, they upload a corresponding heatmap image that illustrates how users interact with that part of the site. Users can then set specific improvement goals, choosing from a library of predefined options or creating custom objectives. Heatbot's AI analyzes the heatmap data alongside these goals to produce improved HTML, CSS, and JavaScript, accompanied by a detailed report on the enhancements made. Heatbot addresses the complexities involved in implementing changes based on heatmap data. It recognizes the challenges of accurately interpreting data, prioritizing changes, and balancing user experience with business objectives. The platform also alleviates the time and financial burdens associated with cross-device consistency, requiring collaboration among UX designers, marketers, and business stakeholders. Traditional methods often involve extensive A/B testing and significant investment in developer resources, making Heatbot's streamlined approach particularly appealing. The pricing structure of Heatbot offers various plans tailored to different user needs. The Basic plan is ideal for individuals and small projects, priced at $9 per month, allowing for limited project generations. The Pro plan, at $29 per month, caters to power users and small businesses, offering more projects and the ability to generate comprehensive reports. For larger enterprises, a custom solution is available starting at $2,990 per month, providing unlimited access and tailored support. User feedback highlights the effectiveness of Heatbot in simplifying the process of making data-driven design decisions. Many users express excitement about the potential for automated improvements in conversion rates and overall user experience. The platform's ability to generate high-converting pages based on collected data is seen as a significant advancement in the field of web design. Heatbot also provides answers to common questions, clarifying its capabilities in generating quality code based on user-defined frameworks and how its AI can enhance conversion rates by analyzing heatmap data in conjunction with website screenshots. This comprehensive approach positions Heatbot as a powerful tool for unlocking the full potential of website heatmap analysis, making it easier for users to implement effective design changes based on real user interactions. In summary, Heatbot.io stands out as a data-driven solution that empowers users to turn heatmap insights into tangible website improvements, streamlining the redesign process and enhancing overall user engagement.

This author initially designed a strict, composable design system inspired by Chakra UI to solve inconsistencies and a poorly structured existing design system. However, the system proved difficult for many developers to use due to their lack of experience with functional composition. In hindsight, the author believes a design system built around Tailwind/NativeWind would have been more approachable for developers.

Headless UI is a collection of unstyled UI components for React and Vue that integrate easily with Tailwind CSS. Headless UI v2.0 introduces new features like built-in anchor positioning, a checkbox component, and improved accessibility for faster UI development.

This developer built the same web application using different web frameworks: FastAPI, FastHTML, Next.js, SvelteKit, and FastAPI combined with Svelte. They compared the developer experience and unique features of each framework by implementing CRUD operations in a simple "Look at Your Data" app. FastAPI and FastHTML were more concise in code, while Next.js and SvelteKit required more code but offered a more structured approach and better UI elements.

WebJSX is a library designed for building web applications using JSX and Web Components, emphasizing simplicity and efficiency. It provides two primary functions: `createElement`, which allows developers to create virtual DOM elements using JSX syntax, and `applyDiff`, which efficiently updates the real DOM by comparing virtual nodes. The library supports a straightforward installation process via npm, enabling developers to quickly integrate it into their projects. It fully embraces JSX syntax, allowing for the creation of virtual DOM elements and the updating of the real DOM seamlessly. For instance, a simple virtual DOM can be defined using JSX, and the `applyDiff` function can be used to render it in the actual DOM. WebJSX also facilitates the creation of custom Web Components. Developers can define custom elements by extending the `HTMLElement` class and implementing lifecycle methods such as `connectedCallback` and `attributeChangedCallback`. This allows for dynamic rendering based on attribute changes, with the ability to use JSX within the custom elements. Event handling is made easy with JSX, allowing developers to attach event listeners directly within their markup. Additionally, the library supports fragments, enabling the grouping of multiple elements without adding extra nodes to the DOM. The API includes methods for creating virtual DOM elements, applying differences to the DOM, and handling fragments. There are also advanced features like rendering suspension, which allows for batching property updates to minimize re-renders. For TypeScript users, WebJSX provides configuration options to handle JSX properly, and developers can declare custom elements to avoid TypeScript errors related to unknown HTML tags. WebJSX can be bundled with various tools, but it also supports direct module loading in web pages, making it flexible for different development environments. The library encourages community contributions, welcoming bug reports, feature suggestions, and pull requests. Overall, WebJSX is an open-source project licensed under the MIT license, aimed at simplifying the development of web applications with modern web standards.

Onlook enables developers to build their React + TailwindCSS apps visually in the browser. It's an open-source, local-first visual editor that lets you make live edits directly in the browser DOM.

TinyJS is a lightweight JavaScript library designed to simplify the process of dynamically creating HTML elements. It allows developers to generate standard HTML tags programmatically, making DOM manipulation more straightforward and efficient. The library supports deep property assignment, enabling users to work with nested property structures for more complex elements. One of the key features of TinyJS is its ability to dynamically create HTML elements. Users can generate any standard HTML tag with ease, apply properties, and append content, whether it be strings or other elements. Additionally, TinyJS provides convenient functions for selecting DOM elements, using `$` for single selections and `$$()` for multiple selections. The library operates by attaching functions for each HTML tag to the global window object. This means that developers can create elements simply by calling the tag name as a function, passing in optional properties and child elements. For example, to create a `div` with specific attributes and child elements, one can use a syntax that resembles native JavaScript but is more concise and intuitive. TinyJS also includes helper functions that enhance its usability. The `$` function acts as a wrapper around `document.querySelector`, allowing for easy selection of a single DOM element, while `$$()` wraps `document.querySelectorAll`, returning an array of elements for easy iteration. An example of using TinyJS might involve creating a `div` that contains an `h1` and a `p` element. This is done by calling the respective tag functions and passing in the desired properties and content. The created elements can then be appended to the document body or any other parent element. Installation of TinyJS is straightforward; developers simply need to include the `tiny.js` script in their project. Once included, they can utilize any valid HTML tag as a function to create elements, assign properties, and append children to the DOM. The library supports a wide range of HTML tags, including basic text elements like `p` and `span`, interactive elements such as `button` and `input`, media elements like `img` and `video`, and various container elements including `div` and `section`. For those interested in contributing to TinyJS, the repository encourages users to open an issue before submitting a pull request, fostering a collaborative development environment. Overall, TinyJS offers a powerful yet simple solution for developers looking to enhance their web applications with dynamic HTML element creation.

TinyJS is a lightweight JavaScript library designed to facilitate the dynamic creation of HTML elements. It streamlines the process of manipulating the Document Object Model (DOM) by allowing developers to generate standard HTML tags programmatically, apply properties, append content, and select DOM elements with ease. One of the key features of TinyJS is its ability to dynamically create HTML elements. Users can generate any standard HTML tag effortlessly, which is particularly useful for building user interfaces. The library also supports deep property assignment, enabling developers to work with nested property structures for more complex elements. Additionally, it simplifies content appending by accepting both strings and elements as child content, making it versatile for various use cases. TinyJS introduces two helper functions for DOM selection: the `$` function, which acts as a wrapper around `document.querySelector`, and the `$$()` function, which wraps `document.querySelectorAll` and returns an array of DOM elements. This allows for straightforward element selection and iteration, enhancing the overall usability of the library. To illustrate its functionality, an example is provided where a `div` element is created with specific attributes and child elements, such as an `h1` and a `p`. This demonstrates how TinyJS can be used to generate and manipulate HTML elements dynamically. For installation, users simply need to include the `tiny.js` script in their project. Once included, they can utilize any valid HTML tag as a function to create elements, assign properties, and append children to the DOM. An advanced example showcases how properties can be deeply assigned to elements, such as styling a button directly through its properties. TinyJS supports a wide range of HTML tags, including basic text elements, interactive elements, media elements, and container elements, making it a comprehensive tool for web development. The library encourages contributions from the community, asking users to open an issue before submitting a pull request. Overall, TinyJS provides a simple yet powerful utility for developers looking to enhance their web applications with dynamic HTML element creation.

WinterJS is a new high-speed JavaScript runtime built with Rust and the SpiderMonkey engine. While Bun has more comprehensive toolkit features, WinterJS focuses more on speed and WinterCG compliance, but lacks Windows and TypeScript support. While initial performance tests favor Bun, WinterJS shows potential when it is run natively.

Bun 1.1.28 introduces experimental support for compiling and running native C code directly from JavaScript. This allows developers to utilize system libraries and APIs that are not directly accessible through JavaScript, overcoming the limitations of N-API and WebAssembly. This article goes over how Bun does it by using TinyCC for fast in-memory compilation that provides near-zero call overhead.

In today's technology landscape, there is an overwhelming abundance of frameworks, libraries, and plugins that promise to streamline development and reduce costs. Many businesses eagerly adopt these external codebases, hoping to accelerate their time to market. However, a significant number of developers overlook the hidden costs and risks associated with relying on these external solutions. One of the most critical considerations is security. Regardless of whether the code was written in-house or sourced externally, the responsibility for every line of code in a project ultimately falls on the organization. The consequences of a security breach are severe, whether the vulnerability lies in an external library or internal code. While external codebases may seem appealing, they often introduce a larger attack surface, making it easier for malicious actors to exploit vulnerabilities. In contrast, internally developed code tends to be more focused and task-specific, which can significantly reduce security risks. Dependency on external codebases can create substantial risks throughout a project's lifecycle. Many libraries have their own dependencies, leading to complex dependency graphs that can complicate maintenance and increase vulnerability exposure. Even after thorough research to select an appropriate library, the landscape can change rapidly. A library that seemed suitable six months ago may no longer be actively maintained or may undergo significant changes that require ongoing integration work. This can lead to a cycle of dependency management that consumes valuable resources. Moreover, the notion that free libraries come without cost is misleading. Organizations must account for the time and effort spent on researching, evaluating, integrating, and maintaining these external codebases. When comparing the total cost of using an external library to developing a targeted internal solution, it often becomes evident that the latter is more cost-effective in the long run. In building BotBarrier, the team prioritized minimizing dependencies to only those essential functions that could not be developed in-house. This approach allows for greater control over the product and reduces the burden of managing unnecessary dependencies. By opting to create their own backend and frontend frameworks, the team limited their reliance on external libraries, using only three essential SDKs for specific functionalities. Ultimately, the goal is to maintain the flexibility to adapt and innovate without being tethered to the latest trends in technology. Organizations should strive to make informed decisions about their dependencies, focusing on what they can control and ensuring that their development efforts align with their business objectives. By doing so, they can safeguard their projects against the risks associated with external codebases while fostering a more secure and efficient development environment.

In-app browsers, embedded within native mobile apps, often lack key features, compromise user privacy, and offer inconsistent UI/UX, leading to a suboptimal browsing experience.

Warpcast is experimenting with mini-apps, allowing users to launch them directly from frames and deep links. The first prototypes, including Paragraph and Flappycaster, are now available to try, with more to come soon.

Mountaineer is a web framework for building Web applications using Python.

Plain Vanilla is an explainer for doing web development using only vanilla techniques. This means no tools and no frameworks — just HTML, CSS, and JavaScript.

The HTML popover attribute allows for native modals to be created.

The web has seen an increase in complexity, slowing it down significantly for users with low-end devices or slow internet connections. Modern web apps are CPU-hungry. Even with fast internet, websites like Threads and Patreon take a long time to load on low-end phones because of CPU demands. Most developers believe that hardware will get faster and solve performance issues, but hardware improvements slow down over time. Instead, deliberate optimization to reduce CPU impact is crucial in making the web usable for everyone as web bloat locks people from countries with slower internet speeds out.

The web is buzzing with innovation. New CSS and UI features are reshaping how we create beautiful and engaging web experiences. Highlights from Google I/O 2024 include scroll-driven animations, view transitions, and anchor positioning, each offering exciting possibilities for web development. These advancements can simplify complex interactions, boost performance, and elevate the user experience.